<!DOCTYPE html> 
<html> 
    <head> 
    <title>Subscribtion</title> 
   <link rel="stylesheet" href="/static/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="/static/jquery.min.js"></script>
    <script src="/static/jquery.mobile-1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head> 
<body>

<!-- Home Page -->
<div data-role="page" id="home"> 
    <div data-role="header">
      <a href="/courses/subscribtion"> back</a>  <h1>Subscribtion</h1> <a href='/accounts/logout/' rel="external" > logout</a>
    </div> 
{% if courses %}   
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search by course or teacher name...">
{% for course in courses %}
<li ><a style="white-space:normal;" href="/courses/request/{{course.id}}"  >{{course.title}} <div style="display:none">({{course.teacher}})</div></a></li>
{% endfor %}</ul>
</div> 
{% else %}
<h2>No courses starts with that letter</h2>

{% endif %}
    
</div>
</body>
</html>

